<template>
    <n-card class="w-50%" title="🎶 选择歌曲" segmented>
      <p class="text-14 opacity-60">上传一首歌曲，我们将为你展示歌词并生成分镜。</p>
  
      <n-divider class="mt-8" />
  
      <div class="mt-8">
        <h3 class="text-16 opacity-80 mb-4">直接输入歌词：</h3>
        <n-input
          v-model:value="manualLyrics"
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 10 }"
          placeholder="在此输入歌词内容..."
          class="mb-4"
        />
      </div>
  
      <div class="flex gap-4 mt-4">
        <n-button type="primary" @click="useManualLyrics" :disabled="!manualLyrics.trim()">
          開始生成分鏡
        </n-button>
        <n-button @click="triggerFileInput">
          选择本地歌词文件
        </n-button>
      </div>
  
      <input ref="fileInput" type="file" accept=".txt,.json" @change="handleFileChange" />
  
      <KeywordSelector />
      <ImageUploader />
    </n-card>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import KeywordSelector from './KeywordSelector.vue'
  import ImageUploader from './ImageUploader.vue'
  
  const manualLyrics = ref('')
  const fileInput = ref(null)
  
  const useManualLyrics = () => {
    // Your logic here
  }
  
  const triggerFileInput = () => {
    // Your logic here
  }
  
  const handleFileChange = (event) => {
    // Your logic here
  }
  </script>
  